import React from 'react';
import * as echarts from 'echarts';

export interface IAppProps {
}

export interface IAppState {
  myChart: any,
  option: any
}

export default class App extends React.Component<IAppProps, IAppState> {
  constructor(props: IAppProps) {
    super(props);

    this.state = {
      myChart: null,
      option: {}
    }
  }
  componentDidMount () {
    this.setState({
      myChart: echarts.init((document.getElementById('box') as any)),
      option: {
        title: {
          text: 'ECharts 入门示例',
          subtext: 'echarts简单',
          left: '50%',
          textAlign: 'center',
          // show: false
          link: 'https://www.baidu.com',
          textStyle: {
            color: '#f66'
          }
        },
        legend: {
          bottom: 10
        },
        grid: {
          show: true
        },
        brush: {
          xAxisIndex: 'all',
          brushLink: 'all',
          outOfBrush: {
              colorAlpha: 0.1
          }
      },
        tooltip: {},
        axisPointer: {
          show: true,
          link: {xAxisIndex: 'all'},
          label: {
              backgroundColor: '#777'
          }
        },
        toolbox: {
          show: true,
        showTitle: false, // 隐藏默认文字，否则两者位置会重叠
        feature: {
            saveAsImage: {
                show: true,
                title: 'Save As Image'
            },
            dataView: {
                show: true,
                title: 'Data View'
            },
        },
        tooltip: { // 和 option.tooltip 的配置项相同
            show: true,
            formatter: function (param) {
                return '<div>' + param.title + '</div>'; // 自定义的 DOM 结构
            },
            backgroundColor: '#222',
            textStyle: {
                fontSize: 12,
            },
            extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' // 自定义的 CSS 样式
        }
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        dataZoom: {},
        yAxis: {},
        // darkMode: 'dark',
        // backgroundColor: 'rgba(0,0,0, 0.9)',
        // polar: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        },
        {
          name: '库存',
          type: 'line',
          data: [15, 120, 136, 110, 110, 120]
      }]
      }
    }, () => {
      this.state.myChart.setOption(this.state.option)
    })
  }
  changeLine = () => {
    this.setState({
      option: {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20]
        }]
      }
    }, () => {
      this.state.myChart.setOption(this.state.option)
    })
  }
  changeLineAndData = () => {
    this.setState({
      option: {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'line',
            data: [15, 25, 16, 50, 70, 120]
        }]
      }
    }, () => {
      this.state.myChart.setOption(this.state.option)
    })
  }
  public render() {
    return (
      <div>
        <h1>echarts案例</h1>
        <button onClick = { this.changeLine }>折线图</button>
        <button onClick = { this.changeLineAndData }>折线图-改变数据</button>
        <div id="box" style={{ width: 1000, height: 800, backgroundColor: '#fff'}}></div>
      </div>
    );
  }
}

